<template>
<div class="month ">
  <formHeader title="每月之星" v-if="team==0"></formHeader>
  <formHeader title="团队之星"  v-else></formHeader>
  <div class="head">
    <div class="top" v-if="type==1">销冠基金:{{(sum/2).toFixed(2)}}元</div>
    <div class="top" v-else>销冠基金:{{(sum/2).toFixed(2)}}元</div>
    <div class="months">
      <span @click="getList(1)">上月</span>
      <span @click="getList(0)">本月</span>
    </div>
    <div class="list">
      <div class="item" v-for="(item,index) in list" :key="index">
        <span class="sort">{{index+1}}</span>
        <img :src="item.avatar" class="avatar" alt="">
        <span class="name">{{item.name}}</span>
        <span class="num">{{item.quantity}} 单</span>
        <span class="desc" v-if="index==0">{{first}}元</span>
        <span class="desc" v-if="index==1">{{second}}元</span>
        <span class="desc" v-if="index==2">{{third}}元</span>
        <span class="desc" v-if="index>2"> </span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {month} from "@/api/user";
import formHeader from '@/components/form-header'
export default {
  components:{
    formHeader
  },
  computed:{
    first(){
      return  ((this.sum/2)*0.5).toFixed(2)
    },
    second(){
      return  ((this.sum/2)*0.3).toFixed(2)
    },
    third(){
      return  ((this.sum/2)*0.2).toFixed(2)
    }
  },
  data(){
    return{
      type:0,
      team:0,
      list:[],
      sum:0.00
    }
  },
  methods:{
    getList(type){
      this.type = type
      month(type,this.team).then(res=>{
        this.list = res.data.filter(item=>item.quantity>0)
        this.sum = res.extra.sum
      })
    }
  },
  activated() {
     this.team = this.$route.query.team
     this.getList(0)
  }
}
</script>

<style scoped lang="stylus">
  .month
     background-color #00D6C0
     min-height 100%
     z-index 3
     position relative
    .head
      margin-top 35px
      padding-top 16px
      display flex
      align-items center
      justify-content center
      flex-direction column
      .top
        display flex
        align-items center
        justify-content center
        margin-top 21px
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #00BDAA;
        padding 0 5px
        height: 35px;
        background: #FFFFFF;
        border-radius: 10px;
      .months
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFEFE;
        margin 21px 0
        display flex
        justify-content center
        span
          &:first-child
            margin-right 45px
    .list
      background-color white
      width 350px
      border-radius: 8px;
      display flex
      flex-direction column
      align-items center
      padding-bottom 20px
      .item
        width 100%
        margin-top 23px
        display flex
        align-items center
        align-items center
        height 45px
        .sort
          margin-left 9px
          margin-right 19px
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        .avatar
          margin-right 12px
          width: 44px;
          height: 44px;
          border-radius: 50%;
        .name
          flex 1
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        .num
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #00D6C0;
        .desc
          margin 0 10px
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
</style>